<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 父向子传值  通过属性进行传值-->
        <h1>{{msg}}</h1>
        <!-- 1. 通过自定义事件，传递触发事件
        @myevent myevent 自定义事件的名称
        @click click 系统内部内置事件
        -->
        <my-comp @myevent="handleMyEvent"></my-comp>
    </div>

    <script src="./vue.js"></script>
    <script>
        Vue.component("my-comp",{
            template:`
                <div>
                    <h2>my comp组件</h2>
                    /* 3. 子组件中，定义一下子传父的方法 */
                    <button @click="handleClick">子向父传值</button>
                </div>
            `,
            methods:{
                // 4. 子传父方法 的实现
                handleClick:function(){
                    // 5. 通过 this.$emit() 方法触发自定义事件
                    this.$emit("myevent","西瓜");
                }
            }
        })
        let vm1 = new Vue({
            el:"#root",
            data:{
                msg:"父向子传值",
                num:100
            },
            methods: {
                /* 2. 自定义事件里面处理函数的实现 */
                handleMyEvent:function(e){
                    // e 子向父传递参数
                    console.log(e);
                }
            },
        })

    </script>
</body>
</html>